import React from "react"
import Square from './Square'

class Board extends React.Component {
  renderSquare(i, key) {
    return (
      <Square
        onClick={() => this.props.onClick(i)}
        value={this.props.squares[i]}
        winLines={this.props.winLines}
        id={i}
        key={key}
      />
    )
  }

  render() {
    const boardRows = [[0, 1, 2], [3, 4, 5], [6, 7, 8]].map(
      (itemRow, index) => {
        return (
          <div className="board-row" key={index}>
            {itemRow.map((itemSquare, index) => {
              return this.renderSquare(itemSquare, index)
            })}
          </div>
        )
      }
    )
    return (
      <div className="board-container">
        <div className="board-row">
          <div className="number">1</div>
          <div className="number">2</div>
          <div className="number">3</div>
        </div>
        {boardRows}
        <div className="board-column">
          <div className="number">1</div>
          <div className="number">2</div>
          <div className="number">3</div>
        </div>
      </div>
    )
  }
}

export default Board
